<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/layui/2.5.7/css/layui.css"/>
</head>
<script src="/webjars/layui/2.5.7/layui.js"></script>
<body>
如果我们的表格要开始监听   lay-fi
    <button id="add"> 添加按钮</button>
    <table id="demo" lay-filter="demo3"></table>
</body>

<script>
        layui.use(['table','jquery','layer'],function(){
            var table = layui.table;
            var $ = layui.jquery;
            var layer = layui.layer;
            //给我们的添加按钮绑定一个点击事件
            $('#add').click(function(){
                layer.open({
                    type:2,
                    area:['1000px','500px'],
                    content:'/addStudent'
                })
            })
            //监听单元格编辑
            table.on('edit(demo3)', function(obj){
                var value = obj.value //得到修改后的值
                    ,data = obj.data //得到所在行所有键值
                    ,field = obj.field; //得到字段
                console.log(obj);

                $.ajax({
                    url:'/updateStudentById'
                    ,data:JSON.stringify(obj.data)
                    ,dataType:'json'
                    ,contentType:'application/json'
                    ,method:'post'
                    ,success:function(data){
                        alert(data)
                    }
                })


                // $.ajax({
                //     url:'/updateUserByField',
                //     data:{id:obj.data.id,field:obj.field,value:obj.value},
                //     success:function(data){
                //
                //     },
                //     error:function(){
                //         layer.msg('与服务器交互失败')
                //     }
                // })
                layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
            });
            table.render({
                elem:'#demo',
                url:'/getAllStudent',
                cols:[
                    [
                        {field:'id',title:'id'},
                        {field:'username',title:'用户名',edit:'text'},
                        {field:'password',title:'密码',edit:'text'},
                        {field:'sex',title:'性别',templet: '#sfyms',edit:'text'},
                    ]
                ]


            })
        })
</script>
<script type="text/html" id="sfyms">

    {{#  if(d.sex == '男'){ }}
    <span style="color: #F581B1;">男</span>
    {{#  } else { }}
    <span style="color:green;">女</span>
    {{#  } }}
</script>
</html>